<template>
    <div class="search-container">
        <div 
            v-for="engine in searchEngines" 
            :key="engine.key"
            class="search"
        >
            <span class="search-icon">
                <img :src="engine.icon" :alt="engine.name" />
            </span>
            <input 
                type="text" 
                class="search-input" 
                :placeholder="engine.placeholder"
                @keydown.enter="() => handleSearch(engine.key)"
                v-model="searchQueries[engine.key]" 
            />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { SEARCH_ENGINES, performSearch } from '../constants/searchEngines'
import searchIcon1 from '../assets/Google@1x.svg'
import searchIcon2 from '../assets/baidu.svg'

// 搜索引擎配置
const searchEngines = [
    {
        key: 'BAIDU',
        name: SEARCH_ENGINES.BAIDU.name,
        placeholder: SEARCH_ENGINES.BAIDU.placeholder,
        icon: searchIcon2
    },
    {
        key: 'GOOGLE', 
        name: SEARCH_ENGINES.GOOGLE.name,
        placeholder: SEARCH_ENGINES.GOOGLE.placeholder,
        icon: searchIcon1
    }
];

// 搜索查询状态
const searchQueries = reactive({
    BAIDU: '',
    GOOGLE: ''
});

/**
 * 处理搜索操作
 * @param {string} engineKey - 搜索引擎键名
 */
const handleSearch = (engineKey) => {
    const query = searchQueries[engineKey];
    if (query && query.trim()) {
        performSearch(engineKey, query);
        // 可选：清空搜索框
        // searchQueries[engineKey] = '';
    }
};
</script>

<style scoped>
.search-container {
    display: flex;
    flex-direction: row; /* 桌面端默认同行显示 */
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 80rem; /* 限制最大宽度 */
    margin: 0 auto; /* 居中显示 */
    padding: 2rem;
    gap: 2rem;
    flex-wrap: nowrap; /* 桌面端不换行 */
}

.search {
    display: flex;
    flex-direction: row;
    width: auto; /* 桌面端自动宽度，允许同行显示 */
    min-width: 20rem; /* 最小宽度保证可用性 */
    max-width: 30rem; /* 桌面端最大宽度 */
    flex: 1; /* 平分剩余空间 */
    height: 4rem;
    padding: 0rem 1rem 0rem 3rem;
    align-items: center;
    flex-shrink: 1; /* 允许收缩 */

    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.20), 0rem 0rem 2.44rem 0rem rgba(134, 87, 87, 0.42);

    border: none;
    border-radius: 624.94rem;
    transition: all 0.3s ease; /* 添加过渡动画 */
}

.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
}

.search-icon img {
    width: 100%;
    height: auto;
    transition: all 0.3s ease; /* 图标过渡动画 */
}

.search-input {
    width: 100%;
    height: 4rem;
    border: none;
    background: rgba(255, 255, 255, 0.0);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    color: rgba(255, 255, 255, 0.50);
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    margin-left: 2rem;
    padding-right: 1.5rem;
    transition: all 0.3s ease; /* 输入框过渡动画 */
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.50);
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 平板端适配 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .search-container {
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .search {
        max-width: 25rem;
        height: 3.5rem;
    }
    
    .search-input {
        height: 3.5rem;
        font-size: 0.9rem;
        margin-left: 1.5rem;
    }
    
    .search-icon {
        width: 1.8rem;
        min-width: 1.8rem;
    }
}

/* 手机端适配 (最大768px) */
@media (max-width: 768px) {
    .search-container {
        flex-direction: column; /* 手机端上下显示 */
        flex-wrap: wrap; /* 手机端允许换行 */
        gap: 1rem;
        padding: 1rem;
    }
    
    .search {
        width: 100%; /* 手机端占满宽度 */
        min-width: auto; /* 重置最小宽度 */
        max-width: 100%; /* 手机端占满宽度 */
        flex: none; /* 重置flex设置 */
        height: 3rem; /* 缩小高度 */
        padding: 0rem 0.8rem 0rem 2rem; /* 缩小内边距 */
    }
    
    .search-icon {
        width: 1.5rem; /* 缩小图标 */
        min-width: 1.5rem;
    }
    
    .search-input {
        height: 3rem; /* 缩小输入框高度 */
        font-size: 0.9rem; /* 缩小字体 */
        margin-left: 1rem; /* 缩小间距 */
        padding-right: 1rem;
    }
    
    .search-input::placeholder {
        font-size: 0.9rem; /* 缩小占位符字体 */
    }
}

/* 小屏手机端适配 (最大480px) */
@media (max-width: 480px) {
    .search-container {
        padding: 0.8rem;
        gap: 0.8rem;
    }
    
    .search {
        height: 2.8rem; /* 进一步缩小 */
        padding: 0rem 0.6rem 0rem 1.5rem;
    }
    
    .search-icon {
        width: 1.3rem;
        min-width: 1.3rem;
    }
    
    .search-input {
        height: 2.8rem;
        font-size: 0.85rem;
        margin-left: 0.8rem;
        padding-right: 0.8rem;
    }
    
    .search-input::placeholder {
        font-size: 0.85rem;
    }
}
</style>